<template>
  <div class="main">
    <div class="mapcontainer">
      <MarsMap :url="configUrl" @onload="onMapload" />
    </div>

    <div class="lengendDiv" v-if="showDxxrStatus">
      <div class="dxLengend"></div>
      <div class="tick" v-for="(item, index) in lengendList" :key="index" :style="'top:' + item.top + '%'">
        <span>- </span>
        <span> {{ item.name }} </span>
      </div>
    </div>

    <LeftVue />
    <RightVue />

    <info-dialog v-if="showInfoDialog" :titleName="titleName" @closeChartDialog="showInfoDialog = false">
      <template #default v-if="titleName.indexOf('雨量计') != -1">
        <br />
        <div>水库名称：<span class="import-txt">蔡庄水库</span></div>
        <div>1小时降雨量：<span class="import-txt">0mm</span></div>
        <div>6小时降雨量：<span class="import-txt">0mm</span></div>
        <div>24小时降雨量：<span class="import-txt">0mm</span></div>
        <div>采集时间：<span class="import-txt">2025-04-11 08:00:03</span></div>
      </template>
      <template #default v-else-if="titleName.indexOf('水位计') != -1">
        <br />
        <div>水库名称：<span class="import-txt">蔡庄水库</span></div>
        <div>实时水位：<span class="import-txt">1107.03m</span></div>
        <div>采集时间：<span class="import-txt">2025-04-11 08:10:12</span></div>
        <!-- <div>水深：<span class="import-txt">18435748848</span></div> -->
      </template>
      <template #default v-else-if="titleName.indexOf('流量计') != -1">
        <br />
        <div>水库名称：<span class="import-txt">蔡庄水库</span></div>
        <div>流量：<span class="import-txt">3m³/s</span></div>
        <div>采集时间：<span class="import-txt">2025-04-11 08:02:08</span></div>
      </template>
      <template #default v-else-if="titleName.indexOf('渗压计') != -1">
        <br />
        <div>水库名称：<span class="import-txt">蔡庄水库</span></div>
        <div>渗压：<span class="import-txt">1092.3m</span></div>
        <div>采集时间：<span class="import-txt">2025-04-11 08:20:36</span></div>
      </template>
      <template #default v-else-if="titleName.indexOf('位移') != -1">
        <br />
        <div>水库名称：<span class="import-txt">蔡庄水库</span></div>
        <div>位移x：<span class="import-txt">2mm</span></div>
        <div>位移y：<span class="import-txt">4mm</span></div>
        <div>位移z：<span class="import-txt">6mm</span></div>
        <div>采集时间：<span class="import-txt">2025-04-11 08:18:55</span></div>
      </template>
    </info-dialog>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import LeftVue from '../components/leftVue/index.vue'
import RightVue from '../components/rightVue/index.vue'
import MarsMap from '../components/marsMap/index.vue'
import infoDialog from '../components/info-dialog/index.vue'
import * as GeoTIFF from 'geotiff'
import proj4 from 'proj4'
import * as mars3d from 'mars3d'
const Cesium = mars3d.Cesium
let map = null
let graphicLayer = null
let tiles3dLayer = null
let ImageLayer = null
export default {
  name: 'IndexVue',
  components: {
    MarsMap,
    LeftVue,
    RightVue,
    infoDialog
  },
  data() {
    const basePathUrl = window.basePathUrl || ''
    return {
      lengendList: [
        {
          name: '1120m',
          top: 2
        },
        {
          name: '1110m',
          top: 25
        },
        {
          name: '1100m',
          top: 50
        },
        {
          name: '1090m',
          top: 75
        },
        {
          name: '1080m',
          top: 95
        }
      ],
      showInfoDialog: false,
      titleName: null,
      configUrl: basePathUrl + 'config/config.json',
      jzList: [
        {
          sysk: '蔡庄水库',
          jzname: '界桩1',
          hzb: 4197984.8,
          zyb: 408139.42,
          jd: 112.955433112,
          wd: 37.909656427,
          gd: 1092.4
        },
        {
          sysk: '蔡庄水库',
          jzname: '界桩2',
          hzb: 4197916.5,
          zyb: 408260.08,
          jd: 112.956813642,
          wd: 37.909053353,
          gd: 1092.4
        },
        {
          sysk: '蔡庄水库',
          jzname: '界桩3',
          hzb: 4197870.06,
          zyb: 408301.55,
          jd: 112.957291035,
          wd: 37.908639203,
          gd: 1092.4
        },
        {
          sysk: '蔡庄水库',
          jzname: '界桩4',
          hzb: 4197845.85,
          zyb: 408454.08,
          jd: 112.959028273,
          wd: 37.908436472,
          gd: 1092.4
        },
        {
          sysk: '蔡庄水库',
          jzname: '界桩5',
          hzb: 4197825.42,
          zyb: 408542.67,
          jd: 112.960038071,
          wd: 37.908261345,
          gd: 1092.4
        }
      ],
      mapShowList: [
        { label: '大坝', type: 'db', position: [112.960579, 37.912348, 1089.6] },
        { label: '溢洪道', type: 'yhd', position: [112.959676, 37.910093, 1088.9] },
        { label: '涵洞', type: 'hd', position: [112.961797, 37.912502, 1081.9] },
        { label: '闸门', type: 'zm', position: [112.958485, 37.91067, 1092.4] }
      ],
      bspList: [
        {
          name: 'CZ-1',
          jd: 112.962474604,
          wd: 37.912105668,
          gd: 1092.4
        },
        {
          name: 'CZ-2',
          jd: 112.943551136,
          wd: 37.9086909,
          gd: 1092.4
        },
        {
          name: 'CZ-3',
          jd: 112.94103563,
          wd: 37.917293825,
          gd: 1092.4
        },
        {
          name: 'CZ-4',
          jd: 112.939291974,
          wd: 37.931106982,
          gd: 1092.4
        },
        {
          name: 'CZ-5',
          jd: 112.939005788,
          wd: 37.942193054,
          gd: 1092.4
        }
      ],
      waterSurfaceSet: new Set(),
      lastGc: null,
      crtHeight: 0,
      endHeight: 0,
      waterLayer: null,
      bzlxPosition: [
        [112.964375, 37.901659, 1076.8],
        [112.963494, 37.90164, 1079.5],
        [112.961958, 37.901556, 1082]
      ],
      mapRouterSet: new Set(),
      sensorInfo: [
        {
          id: 'ylj',
          name: '雨量计',
          type: 'ylj',
          position: [112.958824, 37.911182, 1108.4],
          panelName: '雨量监测',
          _1hRain: '0mm',
          _6hRain: '0mm',
          _24hRain: '0mm',
          isUpline: true
        },
        {
          id: 'swj',
          name: '水位计',
          type: 'swj',
          position: [112.959757, 37.912208, 37.912208],
          panelName: '水位监测',
          waterLv: '1107.03m',
          isUpline: true
        },
        {
          id: 'llj',
          name: '流量计',
          type: 'llj',
          position: [112.958108, 37.911078, 1090.1],
          panelName: '流量监测',
          ll: '3m³/s',
          isUpline: true
        },
        {
          id: 'syj1',
          name: '渗压计1',
          type: 'syj',
          position: [112.96071, 37.91245, 1091.7],
          panelName: '渗压监测',
          sy: '1092.3m',
          isUpline: true
        },
        {
          id: 'syj2',
          name: '渗压计2',
          type: 'syj',
          position: [112.960688, 37.912147, 11083.2],
          panelName: '渗压监测',
          sy: '1092.3m',
          isUpline: true
        },
        {
          id: 'syj3',
          name: '渗压计3',
          type: 'syj',
          position: [112.960358, 37.912478, 1089.4],
          panelName: '渗压监测',
          sy: '1092.3m',
          isUpline: false
        },
        {
          id: 'wy',
          name: '位移',
          type: 'wy',
          position: [112.959595, 37.911926, 1088.5],
          panelName: '位移监测',
          X: '2mm',
          Y: '4mm',
          Z: '6mm',
          isUpline: true
        }
      ]
    }
  },
  computed: {
    ...mapState({
      allStatus: (state) => state.allStatus,
      twoStatus: (state) => state.twoStatus,
      showJzStatus: (state) => state.showJz,
      showDxxrStatus: (state) => state.showDxxr,
      showDbStatus: (state) => state.showDb,
      showYhdStatus: (state) => state.showYhd,
      showHdStatus: (state) => state.showHd,
      showZmStatus: (state) => state.showZm,
      showGspStatus: (state) => state.showGsp,
      waterHeight: (state) => state.waterHeight,
      showBzlx: (state) => state.showBzlx,
      showYjRight: (state) => state.showYjRight,
      mapPoint: (state) => state.mapPoint
    })
  },
  watch: {
    allStatus(newVal, oldVal) {
      if (oldVal == '总览') {
        this.sensorInfo.forEach((item, index) => {
          this.romovePunctuation(item.type)
        })
      }
    },
    showDxxrStatus(newVal, oldVal) {
      if (newVal) {
        // map.removeLayer(tiles3dLayer, true)
        // tiles3dLayer = null
        this.getDxxr()
      } else {
        this.cleanImageLayer()
        tiles3dLayer.planClip.clear()
      }
    },
    mapPoint(newVal, oldVal) {
      if (newVal.show) {
        newVal.list.forEach((item, index) => {
          this.addPunctuation(item.position, item.type, item.name, false, 1.2)
        })
      } else {
        var getGraphics = graphicLayer.getGraphics()
        getGraphics.forEach((graphic) => {
          if (graphic?.attr?.type === newVal.type) {
            graphicLayer.removeGraphic(graphic)
          }
        })
      }
    },
    twoStatus(newVal, oldVal) {
      var _this = this
      if (oldVal == '全要素') {
        if (this.waterLayer) {
          this.$store.commit('getWater', {
            height: null,
            isShow: false
          })
        }
        if (ImageLayer) {
          _this.$store.commit('changeMapDxxr', false)
        }
      }
      if (oldVal == '全要素' || oldVal == '预警' || oldVal == '预演' || oldVal == '全天候') {
        var getGraphics = graphicLayer.getGraphics()
        getGraphics.forEach((graphic) => {
          if (graphic?.attr?.data === 'sheshi') {
            graphicLayer.removeGraphic(graphic)
          }
        })
      }
      if (oldVal == '预案') {
        _this.$store.commit('changeBzlx', false)
      }
      _this.$store.commit('changeYjRight', false)
      if (tiles3dLayer && newVal !== '预警') {
        map.flyToGraphic(tiles3dLayer)
      }
      if (newVal == '预警' || newVal == '全天候') {
        _this.addPunctuation([112.958824, 37.911182, 1108.4], 'ylj', '雨量计')
        _this.addPunctuation([112.959757, 37.912208, 37.912208], 'swj', '水位计')
        _this.addPunctuation([112.958108, 37.911078, 1090.1], 'llj', '流量计')
        _this.addPunctuation([112.96071, 37.91245, 1091.7], 'syj', '渗压计1')
        _this.addPunctuation([112.960688, 37.912147, 11083.2], 'syj', '渗压计2')
        _this.addPunctuation([112.960358, 37.912478, 1089.4], 'syj', '渗压计3')
        _this.addPunctuation([112.959595, 37.911926, 1088.5], 'wy', '位移', true)
      }
    },
    waterHeight(newVal, oldVal) {
      if (newVal) {
        this.changeRiverHeight(newVal)
      } else {
        this.cleanWater()
      }
    },
    showYjRight(newVal, oldVal) {
      if (newVal) {
        this.changeRiverHeight(1089.23)
      } else {
        this.cleanWater()
      }
    },
    showJzStatus(newVal, oldVal) {
      if (newVal) {
        this.getJz()
      } else {
        this.romovePunctuation('jz')
      }
    },
    showDbStatus(newVal, oldVal) {
      if (newVal) {
        this.getSs('db')
      } else {
        this.romovePunctuation('db')
      }
    },
    showYhdStatus(newVal, oldVal) {
      if (newVal) {
        this.getSs('yhd')
      } else {
        this.romovePunctuation('yhd')
      }
    },
    showHdStatus(newVal, oldVal) {
      if (newVal) {
        this.getSs('hd')
      } else {
        this.romovePunctuation('hd')
      }
    },
    showZmStatus(newVal, oldVal) {
      if (newVal) {
        this.getSs('zm')
      } else {
        this.romovePunctuation('zm')
      }
    },
    showGspStatus(newVal, oldVal) {
      if (newVal) {
        this.getSs('gsp')
      } else {
        this.romovePunctuation('gsp')
      }
    },
    showBzlx(newVal, oldVal) {
      if (newVal) {
        this.getBzlx()
      } else {
        this.cleanBzlx()
      }
    }
  },
  mounted() {},
  methods: {
    getCurrentTime() {
      let dateTime = new Date()
      var time = `${dateTime.getHours() < 10 ? '0' + dateTime.getHours() : dateTime.getHours()}:${dateTime.getMinutes() < 10 ? '0' + dateTime.getMinutes() : dateTime.getMinutes()}:${
        dateTime.getSeconds() < 10 ? '0' + dateTime.getSeconds() : dateTime.getSeconds()
      }`
      var date = `${dateTime.getFullYear()}-${dateTime.getMonth() + 1 < 10 ? '0' + (dateTime.getMonth() + 1) : dateTime.getMonth() + 1}-${
        dateTime.getDate() < 10 ? '0' + dateTime.getDate() : dateTime.getDate()
      }`
      return date + ' ' + time
    },
    // 地图构造完成回调
    onMapload(maps) {
      map = maps
      graphicLayer = new mars3d.layer.GraphicLayer()
      map.addLayer(graphicLayer)
      this.getModel()
    },
    getModel() {
      var _this = this
      tiles3dLayer = new mars3d.layer.TilesetLayer({
        name: '蔡庄水库',
        url: process.env.VUE_APP_FILE_BASE_API + '/czsk/czsk_mx/tileset.json',
        // url: 'http://192.168.5.188:8000/Data/tileset.json',
        maximumScreenSpaceError: 8,
        // maxMemory: 1024, // 最大缓存内存大小(MB)
        // cullWithChildrenBounds: false,
        // skipLevelOfDetail: true,
        preferLeaves: true,
        flyTo: this.allStatus == '总览' ? false : true,
        // center: {
        //   lat: 37.898795,
        //   lng: 112.95248,
        //   alt: 3773.4,
        //   heading: 2,
        //   pitch: -60
        // }
        planClip: {
          positions: [],
          edgeColor: Cesium.Color.GREY,
          edgeWidth: 2.0
        }
      })
      map.addLayer(tiles3dLayer)
      tiles3dLayer.on(mars3d.EventType.load, (event) => {
        if (_this.allStatus == '总览') {
          _this.sensorInfo.forEach((item, index) => {
            _this.addPunctuation(item.position, item.type, item.name)
            _this.addDivPanel(item)
            if (index == 0) {
              map.flyToPoint(item.position, {
                radius: 300,
                scale: 2
              })
            }
          })
        }
      })
    },
    romovePunctuation(type) {
      var getGraphics = graphicLayer.getGraphics()
      getGraphics.forEach((graphic) => {
        if (graphic?.attr?.type === type) {
          graphicLayer.removeGraphic(graphic)
        }
      })
    },
    getSs(type) {
      var _this = this
      if (type == 'gsp') {
        _this.bspList.forEach((item, index) => {
          _this.addPunctuation([item.jd, item.wd, item.gd], 'gsp', item.name)
        })
        return
      }
      var showMapSs = _this.mapShowList.filter(function (item) {
        return item.type == type
      })[0]
      _this.addPunctuation(showMapSs.position, showMapSs.type, showMapSs.label)
    },
    getJz() {
      var _this = this
      _this.jzList.forEach((item, index) => {
        _this.addPunctuation([item.jd, item.wd, item.gd], 'jz', item.jzname)
      })
    },
    addPunctuation(position, type, label, flyTo = false, scale = 0.6) {
      var _this = this
      const punctuation = new mars3d.graphic.BillboardEntity({
        position: position,
        style: {
          image: 'img/marker/' + type + '.png',
          scale: scale ? scale : 0.6,
          horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
          verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
          clampToGround: true,
          label: {
            text: label,
            color: '#fff',
            clampToGround: true,
            pixelOffsetY: 20,
            background: true,
            backgroundColor: '#000'
          }
        },
        attr: {
          type: type,
          data: 'sheshi'
        },
        flyTo: flyTo ? flyTo : false,
        flyToOptions: {
          radius: 500,
          scale: 2
        }
      })
      graphicLayer.addGraphic(punctuation)
      punctuation.on(mars3d.EventType.click, function (event) {
        if (_this.allStatus != '总览' && (type == 'ylj' || type == 'swj' || type == 'llj' || type == 'syj' || type == 'wy')) {
          _this.showInfoDialog = true
          _this.titleName = label
          return
        }
        map.flyToPoint(event.graphic.position, {
          radius: 300,
          scale: 2
        })
      })
      // punctuation.on(mars3d.EventType.rightClick, function (event) {
      //   if (type == 'ylj' || type == 'swj' || type == 'llj' || type == 'syj' || type == 'wy') {
      //     _this.showInfoDialog = true
      //     _this.titleName = label
      //   }
      // })
    },
    addDivPanel(info) {
      if (!info) return
      const graphic = new mars3d.graphic.DivGraphic({
        id: 'div-panel-' + info.id,
        position: info.position,
        style: {
          html: this.getDivHtml(info),
          offsetX: 25,
          horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
          verticalOrigin: Cesium.VerticalOrigin.CENTER,
          distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000),
          clampToGround: true
        },
        attr: info
      })
      graphicLayer.addGraphic(graphic)
      // graphic.testPoint = true; // 打开测试点，与DIV点进行对比位置调整css
    },
    getDivHtml(info) {
      let dataTemp = ''
      if (info.type == 'wy') {
        dataTemp = `<div class="flex">
                  <span>X:${info.X}</span>
                  <span>Y:${info.Y}</span>
                  <span>Z:${info.Z}</span>
                </div>`
      } else if (info.type == 'swj') {
        dataTemp = `<div class="flex-column">
                  <span>实测水位： ${info.waterLv}</span>
                </div>`
      } else if (info.type == 'ylj') {
        dataTemp = `<div class="flex-column" style="font-size: 14px;">
                  <span>1h降雨量: ${info._1hRain}</span>
                  <span>6h降雨量: ${info._6hRain}</span>
                    <span>24h降雨量: ${info._24hRain}</span>
                </div>`
      } else if (info.type == 'llj') {
        dataTemp = `<div class="flex-column">
                  <span>流量： ${info.ll}</span>
                </div>`
      } else {
        dataTemp = `<div class="flex-column"><span>测压管水位：${info.sy}</span></div> `
      }
      var dropDiv = ''
      if (info.isUpline) {
        dropDiv = `<span class="drop greenDrop"></span> `
      } else {
        dropDiv = `<span class="drop cccDrop"></span> `
      }
      return `<div class="map-div-panel">
            <div class="panel-info">
              <img src="img/textures/bg_map_div.png" alt="" />
              <div class="title"><span>${info.panelName}</span>${dropDiv}</div>
              <div class="content">
                ${dataTemp}
               <div class="time">采集时间：${this.getCurrentTime()}</div>

              </div>
            </div>
          </div>`
    },
    addLineEntity(positions) {
      const entityId = 'bzlx01'
      if (this.mapRouterSet.has(entityId)) {
        return
      }
      const graphic = new mars3d.graphic.PolylineEntity({
        id: entityId,
        positions: positions,
        style: {
          width: 20,
          materialType: mars3d.MaterialType.LineFlow,
          materialOptions: {
            color: Cesium.Color.GREEN,
            image: 'img/textures/arrow-small.png',
            repeat: new Cesium.Cartesian2(20, 1),
            speed: 20,
            bgColor: '#0000ff'
          },
          clampToGround: true,
          showAll: true,
          distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
          scaleByDistance: new Cesium.NearFarScalar(1000, 1.0, 200000, 0.2)
        },
        flyTo: true
      })
      graphicLayer.addGraphic(graphic)
      this.mapRouterSet.add(entityId)
    },
    cleanBzlx() {
      if (this.mapRouterSet.size > 0) {
        this.mapRouterSet.forEach((ele) => {
          const graphic = graphicLayer.getGraphicById(ele)
          graphicLayer.removeGraphic(graphic, true)
        })
        this.mapRouterSet.clear()
      }
      this.romovePunctuation('fzc')
      this.romovePunctuation('bxd')
    },
    getBzlx() {
      this.addLineEntity(this.bzlxPosition)
      this.addPunctuation([112.964375, 37.901659, 1076.8], 'fzc', '防治村', false, 2)
      this.addPunctuation([112.961958, 37.901556, 1082], 'bxd', '避险点', false, 2)
    },
    changeRiverHeight(height) {
      // 如果地图上没有加载水域面 先加载
      if (this.waterSurfaceSet.size === 0) {
        this.loadWaterSurface(height)
        return
      }
      this.endHeight = height - this.lastGc
      const step = 3 / 0.1 // 步长
      const stepHeight = (this.endHeight - this.crtHeight) / step // 水面上移高度

      // 再次点击"开启"时从当前位置开启
      this.updateHeight(this.crtHeight)

      clearInterval(this.timeInv)
      this.timeInv = setInterval(() => {
        this.crtHeight += stepHeight // 上移后的当前高度,相当于时实更新
        if (stepHeight > 0) {
          if (this.crtHeight >= this.endHeight) {
            this.crtHeight = this.endHeight
            clearInterval(this.timeInv) // 清除定时器
          }
        } else {
          if (this.crtHeight <= this.endHeight) {
            this.crtHeight = this.endHeight
            clearInterval(this.timeInv) // 清除定时器
          }
        }
        this.updateHeight(this.crtHeight)
      }, 100)
    },
    updateHeight(height) {
      if (!this.waterLayer) return
      this.waterLayer.eachGraphic((graphic) => {
        graphic.offsetHeight = height // 水域高度变化
      })
    },
    loadWaterSurface(height) {
      this.waterLayer = new mars3d.layer.GeoJsonLayer({
        id: 'sym' + height,
        url: process.env.VUE_APP_FILE_BASE_API + '/czsk/czsk_sm.geojson',
        // url: 'http://192.168.5.188:8000/czsk_sm.geojson',
        symbol: {
          type: 'waterC',
          styleOptions: {
            height: height,
            diffHeight: 0,
            normalMap: 'img/textures/waterNormals.jpg', // 水正常扰动的法线图
            frequency: 8000.0, // 控制波数的数字。
            animationSpeed: 0.02, // 控制水的动画速度的数字。
            amplitude: 5.0, // 控制水波振幅的数字。
            specularIntensity: 0.8, // 控制镜面反射强度的数字。
            baseWaterColor: '#006ab4', // rgba颜色对象基础颜色的水。#00ffff,#00baff,#006ab4
            blendColor: '#006ab4', // 从水中混合到非水域时使用的rgba颜色对象。
            opacity: 0.6 // 透明度
            // clampToGround: true
          }
        },
        zIndex: 10
      })
      map.addLayer(this.waterLayer)
      this.waterSurfaceSet.add('sym' + height)
      this.lastGc = height // 保存最后一次水面高度
    },
    cleanWater() {
      if (this.waterSurfaceSet.size > 0) {
        this.waterSurfaceSet.forEach((item) => {
          const layer = map.getLayerById(item)
          if (map.hasLayer(layer)) {
            map.removeLayer(layer, true)
          }
        })
        this.waterSurfaceSet.clear()
        this.waterLayer = null
      }
    },
    removeYxtQy() {
      tiles3dLayer.planClip.positions =
        // [112.96860246140099, 37.92154428171882, 1086.1],
        // [112.93432275015898, 37.90316475100574, 1091.3]
        [
          {
            x: -1963900.2203553894,
            y: 4640564.6457755985,
            z: 3898766.1937997723
          },
          {
            x: -1963916.2851193422,
            y: 4640515.409744572,
            z: 3898808.9391374136
          },
          {
            x: -1963974.0260095848,
            y: 4640458.258350039,
            z: 3898847.505660212
          },
          {
            x: -1964035.2118644074,
            y: 4640436.882031847,
            z: 3898841.366675581
          },
          {
            x: -1964095.5736667947,
            y: 4640418.672324196,
            z: 3898833.231795955
          },
          {
            x: -1964182.4493496553,
            y: 4640387.621314924,
            z: 3898826.4020899963
          },
          {
            x: -1964275.310306387,
            y: 4640368.491951573,
            z: 3898802.479675642
          },
          {
            x: -1964406.922059096,
            y: 4640331.836253597,
            z: 3898779.6317420686
          },
          {
            x: -1964477.6918855063,
            y: 4640311.363562354,
            z: 3898769.2350914883
          },
          {
            x: -1964568.4282178134,
            y: 4640303.2217263775,
            z: 3898733.2850072607
          },
          {
            x: -1964686.2388046545,
            y: 4640292.534687912,
            z: 3898686.692428882
          },
          {
            x: -1964741.7769604644,
            y: 4640261.903533259,
            z: 3898695.26181734
          },
          {
            x: -1964825.1446342275,
            y: 4640260.098782364,
            z: 3898656.3092265264
          },
          {
            x: -1964919.436734386,
            y: 4640265.755926181,
            z: 3898601.404141771
          },
          {
            x: -1964949.4501997293,
            y: 4640291.5740499785,
            z: 3898555.1980354846
          },
          {
            x: -1965010.5578909616,
            y: 4640287.490453317,
            z: 3898530.1580432416
          },
          {
            x: -1965076.7036481602,
            y: 4640308.133905026,
            z: 3898472.614394835
          },
          {
            x: -1965144.077279008,
            y: 4640314.507739805,
            z: 3898430.9877006295
          },
          {
            x: -1965229.5566249802,
            y: 4640302.088175585,
            z: 3898402.28416028
          },
          {
            x: -1965322.4578304838,
            y: 4640262.115708874,
            z: 3898403.279604507
          },
          {
            x: -1965382.3178989317,
            y: 4640202.229591137,
            z: 3898444.611332686
          },
          {
            x: -1965402.8426225984,
            y: 4640129.778458096,
            z: 3898520.504142221
          },
          {
            x: -1965410.1626099932,
            y: 4640093.710003223,
            z: 3898559.256892305
          },
          {
            x: -1965402.4142639015,
            y: 4640059.695978824,
            z: 3898602.961478122
          },
          {
            x: -1965377.2201858696,
            y: 4640058.076702413,
            z: 3898617.720554171
          },
          {
            x: -1965262.793332064,
            y: 4640083.477034798,
            z: 3898645.277854948
          },
          {
            x: -1965182.3022821567,
            y: 4640109.390056629,
            z: 3898655.8477365817
          },
          {
            x: -1965136.346371631,
            y: 4640102.993982419,
            z: 3898685.6134378174
          },
          {
            x: -1965106.7946738843,
            y: 4640090.0180052575,
            z: 3898715.2057768404
          },
          {
            x: -1965047.2857876185,
            y: 4640103.626436543,
            z: 3898729.4345318284
          },
          {
            x: -1964955.3989818236,
            y: 4640084.964761832,
            z: 3898797.1176979267
          },
          {
            x: -1965030.8528048755,
            y: 4640003.869317932,
            z: 3898854.800347931
          },
          {
            x: -1964998.8082060062,
            y: 4639970.803373577,
            z: 3898910.327985948
          },
          {
            x: -1964961.4086994766,
            y: 4639922.031479287,
            z: 3898987.2532513994
          },
          {
            x: -1964897.2378733037,
            y: 4639877.654162926,
            z: 3899071.4741203
          },
          {
            x: -1964923.289585187,
            y: 4639841.371919705,
            z: 3899100.97002818
          },
          {
            x: -1964980.8707529043,
            y: 4639824.510164355,
            z: 3899092.2544093914
          },
          {
            x: -1965015.889585903,
            y: 4639807.725498222,
            z: 3899095.920085414
          },
          {
            x: -1965046.6843027503,
            y: 4639853.178208109,
            z: 3899025.6046672096
          },
          {
            x: -1965064.2412551367,
            y: 4639896.311310217,
            z: 3898966.2055660104
          },
          {
            x: -1965082.7606316784,
            y: 4639943.1164220525,
            z: 3898901.2548555285
          },
          {
            x: -1965098.0659673451,
            y: 4639979.196519386,
            z: 3898850.670434534
          },
          {
            x: -1965148.5819946567,
            y: 4639971.931974542,
            z: 3898834.0933471406
          },
          {
            x: -1965278.349307479,
            y: 4639925.257700501,
            z: 3898823.764659829
          },
          {
            x: -1965330.7593939982,
            y: 4639899.0825868,
            z: 3898828.6694917493
          },
          {
            x: -1965413.0248326345,
            y: 4639891.701350782,
            z: 3898796.283581329
          },
          {
            x: -1965477.2583156023,
            y: 4639878.707941668,
            z: 3898779.5174181643
          },
          {
            x: -1965536.8388581618,
            y: 4639854.935761229,
            z: 3898777.747942716
          },
          {
            x: -1965588.1025621474,
            y: 4639861.189913167,
            z: 3898744.616398536
          },
          {
            x: -1965651.0075236694,
            y: 4639859.607231769,
            z: 3898715.692902621
          },
          {
            x: -1965671.7345055805,
            y: 4639904.736790403,
            z: 3898651.3828577893
          },
          {
            x: -1965674.275872108,
            y: 4639934.1700644335,
            z: 3898614.9382036175
          },
          {
            x: -1965720.2338094397,
            y: 4639947.581534688,
            z: 3898577.90975538
          },
          {
            x: -1965747.5730931002,
            y: 4639970.5414516525,
            z: 3898535.626826721
          },
          {
            x: -1965803.73110619,
            y: 4639955.892944168,
            z: 3898524.1260401644
          },
          {
            x: -1965825.5256195902,
            y: 4639958.692595098,
            z: 3898512.1109331385
          },
          {
            x: -1965785.4081579936,
            y: 4640009.746856274,
            z: 3898470.854138065
          },
          {
            x: -1965706.6031740708,
            y: 4640068.230442724,
            z: 3898447.484383176
          },
          {
            x: -1965643.8160591559,
            y: 4640114.504858439,
            z: 3898418.4232923184
          },
          {
            x: -1965601.9906366188,
            y: 4640155.233269901,
            z: 3898389.6430964735
          },
          {
            x: -1965585.7521493593,
            y: 4640193.441002153,
            z: 3898353.471751034
          },
          {
            x: -1965562.918758142,
            y: 4640228.834816932,
            z: 3898323.2994434573
          },
          {
            x: -1965553.1753379467,
            y: 4640254.194110757,
            z: 3898298.4524989
          },
          {
            x: -1965514.5972030046,
            y: 4640292.2957378505,
            z: 3898272.9058761774
          },
          {
            x: -1965479.988027057,
            y: 4640317.7403716,
            z: 3898259.7066020565
          },
          {
            x: -1965432.6972694108,
            y: 4640351.435469668,
            z: 3898243.523617475
          },
          {
            x: -1965397.0728481547,
            y: 4640379.486046511,
            z: 3898226.864499864
          },
          {
            x: -1965386.33858129,
            y: 4640412.862534318,
            z: 3898194.654379309
          },
          {
            x: -1965408.3329119347,
            y: 4640442.349652941,
            z: 3898147.758449446
          },
          {
            x: -1965442.2951483293,
            y: 4640470.994522407,
            z: 3898098.502934768
          },
          {
            x: -1965416.8719322532,
            y: 4640493.763296158,
            z: 3898082.277709348
          },
          {
            x: -1965384.7353062765,
            y: 4640464.495635199,
            z: 3898141.700364251
          },
          {
            x: -1965359.5781099484,
            y: 4640431.81294091,
            z: 3898191.405129039
          },
          {
            x: -1965342.935363501,
            y: 4640416.585889503,
            z: 3898217.7430638685
          },
          {
            x: -1965297.8346449335,
            y: 4640439.115962183,
            z: 3898207.5442260443
          },
          {
            x: -1965279.0280472245,
            y: 4640448.213709931,
            z: 3898206.4160642778
          },
          {
            x: -1965210.2069572841,
            y: 4640440.028107189,
            z: 3898256.536070567
          },
          {
            x: -1965169.4531146972,
            y: 4640412.813524908,
            z: 3898309.0745182564
          },
          {
            x: -1965130.8156058146,
            y: 4640394.431306035,
            z: 3898349.752880232
          },
          {
            x: -1965087.8083916488,
            y: 4640385.010880815,
            z: 3898379.7693722574
          },
          {
            x: -1965049.504885886,
            y: 4640384.517758919,
            z: 3898398.598482983
          },
          {
            x: -1964998.2669829067,
            y: 4640399.757009394,
            z: 3898403.3603264303
          },
          {
            x: -1964922.2043042684,
            y: 4640434.590405342,
            z: 3898400.0470592915
          },
          {
            x: -1964876.7299158229,
            y: 4640465.358338413,
            z: 3898386.736127722
          },
          {
            x: -1964847.8210427365,
            y: 4640496.941502549,
            z: 3898363.860192278
          },
          {
            x: -1964814.1020002011,
            y: 4640521.241637061,
            z: 3898352.19547515
          },
          {
            x: -1964782.239015509,
            y: 4640521.020832799,
            z: 3898374.0247366657
          },
          {
            x: -1964760.6157969206,
            y: 4640512.996205295,
            z: 3898394.8435834213
          },
          {
            x: -1964730.2851681435,
            y: 4640517.695124362,
            z: 3898405.00939118
          },
          {
            x: -1964727.470002312,
            y: 4640483.068233039,
            z: 3898447.788101062
          },
          {
            x: -1964740.885483319,
            y: 4640453.470675087,
            z: 3898475.4587467667
          },
          {
            x: -1964752.9955641392,
            y: 4640425.788081431,
            z: 3898501.559451295
          },
          {
            x: -1964753.1872353181,
            y: 4640391.237954094,
            z: 3898541.7660159497
          },
          {
            x: -1964683.3430523193,
            y: 4640388.375832258,
            z: 3898580.8782254998
          },
          {
            x: -1964590.362575863,
            y: 4640406.307155927,
            z: 3898607.347128677
          },
          {
            x: -1964336.994314419,
            y: 4640426.8978380645,
            z: 3898709.00573494
          },
          {
            x: -1964246.4893534328,
            y: 4640452.42240227,
            z: 3898717.1178519954
          }
        ]
    },
    cleanImageLayer() {
      if (ImageLayer) {
        map.removeLayer(ImageLayer, true)
        ImageLayer = null
      }
      // if (!tiles3dLayer) {
      //   this.getModel()
      // }
    },
    getDxxr22() {
      this.removeYxtQy()

      mars3d.Util.fetchJson({ url: process.env.VUE_APP_FILE_API + '/czsk/dx.geojson' }).then((data) => {
        if (data) {
          if (graphicLayer) {
            graphicLayer.clear()
          }
          const arr = mars3d.Util.geoJsonToGraphics(data) // 解析geojson
          for (let i = 0; i < arr.length; i++) {
            const item = arr[i]
          
            // polygon面
            const polygonEntity = new mars3d.graphic.PolygonPrimitive({
              id: `last${i}`,
              positions: item.positions,
              style: {
                fill: true,
                color: '#4881a7',
                opacity: 0.5,
              }
            })
            graphicLayer.addGraphic(polygonEntity)

            // PolylineEntity线
            const graphicLine = new mars3d.graphic.PolylinePrimitive({
              positions: item.positions,
              style: {
                color: 'rgba(255,255,255,0.5)',
                width: 1
              }
            })
            graphicLayer.addGraphic(graphicLine)

          }

          // unBindMapDemo();
        }
      })

      // const colorHash = {
      //   1081: '#FFEDA0',
      //   1081.5: '#FED976',
      //   1082: '#FEB24C',
      //   1082.5: '#FD8D3C',
      //   1083: '#FC4E2A',
      //   1083.5: '#E31A1C',
      //   1084: '#BD0026',
      //   1084.5: '#800026'
      // }
      // // url: process.env.VUE_APP_FILE_API + '/czsk/dx.geojson',
      // var graphicLayers = new mars3d.layer.GeoJsonLayer({
      //   id: 1987,
      //   name: '水下地形',
      //   url: process.env.VUE_APP_FILE_API + '/czsk/dx.geojson',
      //   symbol: {
      //     type: 'polygon', // 大数据面类型，效率高
      //     styleOptions: {
      //       color: '#0d3685',
      //       opacity: 1.0,
      //       outline: false
      //     }
      //   },
      //   popup: 'all'
      // })
      // map.addLayer(graphicLayers)
      // graphicLayers.on(mars3d.EventType.load, (event) => {
      //   debugger
      // })
    },
    async getDxxr() {
      this.removeYxtQy()
      const result = await this.tif2img(process.env.VUE_APP_FILE_API + '/czsk/sxdx.tif')
      ImageLayer = new mars3d.layer.ImageLayer({
        name: '蔡庄水库',
        url: result.image,
        rectangle: result.extent,
        crs: result.crs
        // flyTo: true
        // zIndex: 999
      })
      map.addLayer(ImageLayer)
      ImageLayer.on(mars3d.EventType.load, (event) => {
        console.log('TIF 加载完成，地理范围:', event.layer.rectangle)
      })
    },
    async tif2img(url) {
      try {
        // 从指定 URL 加载 GeoTIFF 文件
        const tif = await GeoTIFF.fromUrl(url)
        // 获取 GeoTIFF 中的第一个图像
        const image = await tif.getImage()
        // 获取图像的宽度和高度
        const width = image.getWidth()
        const height = image.getHeight()
        // 获取图像的地理边界框
        let data2 = await image.readRasters()
        const [red = [], green = [], blue = []] = await image.readRasters()
        let canvas = document.createElement('canvas')
        canvas.width = width
        canvas.height = height
        let ctx = canvas.getContext('2d')
        const imageData = ctx.createImageData(width, height)
        const data = new Uint8ClampedArray(width * height * 4)
        // for (let i = 0; i < width * height; i++) {
        //   const offset = i * 4
        //   data[offset] = red[i]
        //   data[offset + 1] = green[i] || 0
        //   data[offset + 2] = blue[i] || 0
        //   data[offset + 3] = red[i] === 0 ? 0 : 255
        // }

        const backgroundRed = 255
        const backgroundGreen = 0
        const backgroundBlue = 0

        for (let i = 0; i < width * height; i++) {
          const offset = i * 4

          const currentRed = red[i]
          const currentGreen = green[i] || 0
          const currentBlue = blue[i] || 0

          if (currentRed === backgroundRed && currentGreen === backgroundGreen && currentBlue === backgroundBlue) {
            // 如果是底色像素，设置为透明
            data[offset] = 0
            data[offset + 1] = 0
            data[offset + 2] = 0
            data[offset + 3] = 0
          } else {
            data[offset] = currentRed
            data[offset + 1] = currentGreen
            data[offset + 2] = currentBlue
            data[offset + 3] = 255
          }
        }
        imageData.data.set(data)

        ctx.putImageData(imageData, 0, 0)

        let canvasImage = canvas.toDataURL('image/png')
        // 获取图像的投影坐标系代码
        const code = image.geoKeys.ProjectedCSTypeGeoKey || image.geoKeys.GeographicTypeGeoKey
        const sourceCrs = `EPSG:${code}`
        // 目标投影坐标系，这里以 EPSG:4326 为例
        const targetCrs = 'EPSG:4326'

        // 定义投影转换
        proj4.defs([
          [sourceCrs, `+proj=utm +zone=33 +ellps=WGS84 +datum=WGS84 +units=m +no_defs`],
          [targetCrs, '+proj=longlat +ellps=WGS84 +datum=WGS84 +no_defs']
        ])
        const [xmin, ymin, xmax, ymax] = image.getBoundingBox()
        let extent = { xmin, ymin, xmax, ymax }
        // 进行投影转换
        if (sourceCrs && sourceCrs !== targetCrs) {
          const ptMin = proj4(sourceCrs, targetCrs, [extent.xmin, extent.ymin])
          const ptMax = proj4(sourceCrs, targetCrs, [extent.xmax, extent.ymax])
          extent = { xmin: ptMin[0], ymin: ptMin[1], xmax: ptMax[0], ymax: ptMax[1] }
        }

        console.log('投影转换后的地理范围:', extent)
        return {
          image: canvasImage,
          extent: extent,
          crs: targetCrs
        }
      } catch (error) {
        console.error('处理 GeoTIFF 文件时出错:', error)
        return null
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.main {
  width: 100vw;
  height: 100vh;
  background: #000;
  .mapcontainer {
    width: 100%;
    height: 100%;
  }

  .lengendDiv {
    position: absolute;
    top: 9vh;
    left: 26vw;
    .tick {
      position: absolute;
      color: #fff;
      left: 10px;
      display: flex;
    }
    .dxLengend {
      width: 10px;
      height: 300px;
      background: linear-gradient(to top, green 0%, yellow 50%, orange 100%);
    }
  }
}
</style>
